<template>
  <div class="bottomNotice" @mouseover="handleMouserOver" @mouseleave="handleMouseLeave"
  :class="{'noticehidden':!status, 'bottomNoticeShow': notopen, 'closeNotice': closeNotice}" v-if="noticeObj">
    <div class="heard flexb" v-if="status">
      <span class="iconfont icon-icon-test-copy-copy"></span>
      <span class="el-icon el-icon-close" @click="handleCloseNotice"></span>
    </div>
    <div class="heardbody flexb" v-else>
      <span class="iconfont icon-logo"></span>
      <div class="hbody" @click="handleShowNotice">
        <marquee>{{noticeObj.title}}</marquee>
      </div>
      <span class="el-icon el-icon-close" @click="handleCloseNotice"></span>
    </div>
    <div class="nbody">
      <h2>{{noticeObj.title}}</h2>
      <div v-html="noticeObj.body"></div>
      <a :href="noticeObj.htmlUrl" target="_blank" @click="handleCloseNotice">{{$t('order.detail')}} &gt;</a>
    </div>
  </div>
</template>

<script>

export default {
  name: 'BottomNotice',
  data() {
    return {
      status: 1, // 0隐藏 1显示
      timer: null,
      count: 5,
      notopen: false,
      closeNotice: false,
      stopTimer: false,
    };
  },
  props: {
    noticeObj: {
      type: Object,
      default: null
    }
  },
  computed: {
  },
  watch: {
  },
  mounted() {
    this.handleTimer();
    setTimeout(() => {
      this.notopen = true;
    }, 500);
  },
  methods: {
    handleCloseNotice() {
      this.closeNotice = true;
      const noticConfig = {
        id: this.noticeObj.articleId,
        open: 1, // 1为开启过， 0 未开启过
      }
      localStorage.setItem('openNotic', JSON.stringify(noticConfig));
    },
    handleShowNotice() {
      this.status = 1;
    },
    handleTimer() {
      if (this.stopTimer) return;
      if (this.timer && !this.status) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.count -= 1;
        if (this.count === 0 && !this.stopTimer) {
          this.status = 0;
        }
        this.handleTimer();
      }, 1000);
    },
    handleMouserOver() {
      this.stopTimer = true;
    },
    handleMouseLeave() {
      this.count = 1;
      this.stopTimer = false;
      this.handleTimer();
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-clolor: #278eda;
$-clolor2: #0069FF;
.colorThis {
  color: $-clolor !important;
  cursor: pointer;
}
.fontcolor3 {
  color: #333;
}
.fontcolor6 {
  color: #666;
}

$-n-height: 200px;
$-n-width: 280px;
.bottomNotice {
  position: fixed;
  width: $-n-width;
  height: $-n-height;
  opacity: 0;
  bottom: -$-n-height;
  transition: all 0.8s;
  right: 0;
  z-index: 9999;
  border-bottom: 0;

  .heard, .heardbody {
    background: $-clolor2;
    padding: 5px;

    span {
      font-size: 20px;
      color: #fff;

      &:last-child {
        cursor: pointer;
      }
    }
  }

  .heardbody {
    .hbody {
      max-width: 215px;
      min-width: 215px;
      overflow: hidden;
      white-space: nowrap;
      color: #fff;
      cursor: pointer;
    }
  }

  .nbody {
    background: #fff;
    padding: 5px 10px;
    height: $-n-height - 33;
    transition: height 0s;
    border: 1px solid #e6e6e6;

    /deep/ div {
      max-height: 80px;
      overflow: hidden;
    }

    a {
      float: right;
      color: $-clolor;
      margin-top: 7px;
      cursor: pointer;
    }

    h2 {
      max-width: 100%;
      font-size: 14px;
      font-weight: bold;
      text-align: left;
      padding: 8px 0 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /deep/ p {
      font-size: 14px;
      display: -webkit-box!important;
      overflow: hidden;
      -webkit-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }
    /deep/ .wysiwyg-text-align-right {
      text-align: right;
      color: #999;
    }
  }
}

.bottomNoticeShow {
  bottom: 0;
  opacity: 1;
  transition: all 0.8s;
}

.noticehidden {
  height: 33px;
  bottom: 0px;
  transition: all 0.8s;

  .nbody {
    transition: all 0.8s;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
}

.closeNotice {
  right: -$-n-width;
  transition: all 0.8s;
}

.theme-1B1D27{
  .fontcolor6, .fontcolor3 {
    color: rgba(255, 255, 255, 0.8);
  }
}
</style>
